import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Button } from 'antd';
import {routerRedux} from 'dva/router';
import { PAGE_SIZE } from '../../constants';
import styles from './Users.css';
function Users({dispatch,list:dataSource,loading,total,page:current}) {
	function pageChangeHandler(page){
		dispatch(routerRedux.push({
			pathname:'/users',
			query:{page}
		}));
	}

 const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a href="">{text}</a>,
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: 'Website',
      dataIndex: 'website',
      key: 'website',
    },
    {
      title: 'Operation',
      key: 'operation',
      render: (text, record) => (
        <span >
          <a href="{record.id}">Delete</a>
        </span>
      )
    },
  ];

  return (
    <div className={styles.normal}>
    	 <div>
	      <Table
	          columns={columns}
	          dataSource={dataSource}
	          loading={loading}
	          rowKey={record => record.id}
	          pagination={false}
	        />
	        <Pagination
	          className="ant-table-pagination"
	          total={total}
	          current={current}
	          pageSize={PAGE_SIZE}
	          onChange={pageChangeHandler}
	        />
         </div>
    </div>
  );
}

function mapStateToProps(state) {
  const { list, total, page } = state.users;
  return {
    loading: state.loading.models.users,
    list,
    total,
    page,
  };
}


export default connect(mapStateToProps)(Users);
